import Vue from 'vue'
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'

/**
 * 全局提供图片预览功能
 * @param {Array|HTMLElement} source 图片源 可传入图片路径组成的数组或者一个dom元素，会自动查找出该dom下所有的img。
 * @param {Number} index 要预览的图片下标
 * @param {Object} optoins 预览组件的参数，列出一些常用的参数说明，具体可查看 https://github.com/fengyuanchen/viewerjs#options
 * @param {Boolean} optoins.backdrop 是否允许点击背景关闭模态框
 * @param {Boolean} optoins.button 是否在右上角显示按钮 关闭 等
 * @param {String} optoins.className 给预览组件自定义class
 * @param {Boolean} optoins.fullscreen 全屏
 * @param {Number} optoins.interval 自动播放的间隔，单位ms，默认5000
 */
export const previewImage = (source, index, options = {}) => {
  let el
  if (Array.isArray(source)) {
    el = document.createElement('div')
    for (const url of source) {
      const img = document.createElement('img')
      img.src = url
      el.appendChild(img)
    }
  } else if (source instanceof HTMLElement) {
    el = source
  } else if (source instanceof Vue) {
    el = source.$el
  } else {
    throw new Error('图片源格式不正确')
  }

  const viewerOptions = {
    ...options,
    // 关闭就销毁，随用随走。
    hide: () => {
      viewer.destroy()
    }
  }

  const viewer = new Viewer(el, viewerOptions)
  viewer.view(index)
}
